<template>
  <ModleTitle class="departAgency" title="部门待办">
    <div class="collapse-wrap">
      <div v-for="item in departData" :key="item.id">
        <div
          :class="activeKey === item.id ? 'collapse-item' : 'collapse-item bottom_solid'"
          @click="clickCard(item.id)"
        >
          <span class="name">{{ item.name }}</span>
          <span class="status"><img :src="getImage('RED')" />{{ item.red }}</span>
          <span class="status"><img :src="getImage('GREEN')" />{{ item.green }}</span>
          <span class="status"><img :src="getImage('YELLOW')" />{{ item.yellow }}</span>
          <div class="right-oper">
            <span>{{ activeKey === item.id ? '展开' : '收起' }}</span>
          </div>
        </div>
        <div class="collapse-item-child" v-if="activeKey === item.id">
          <div class="supervise-content scrollbar bottom_solid">
            <ZTable
              :columns="columns"
              :data-source="item.data"
              :row-class-name="(_record, index) => (index % 2 === 0 ? 'odd' : 'even')"
              size="small"
              :pagination="false"
            >
              <template #bodyCell="{ column, text }">
                <template v-if="column.dataIndex === 'status'">
                  <img :src="getImage(text)" />
                </template>
                <template v-else-if="column.dataIndex === 'operation'">
                  <span>
                    <a>查看</a>
                  </span>
                </template>
                <template v-else>
                  <span>
                    {{ text }}
                  </span>
                </template>
              </template>
            </ZTable>
          </div>
        </div>
      </div>
    </div>
  </ModleTitle>
</template>
<script lang="ts" setup>
import ModleTitle from '@/components/modleTitle/Title.vue'
import ZTable from '@/components/z-table/index'
import { Column } from '@/interface/table'
import { ref, watch } from 'vue'

const activeKey = ref('1')
let columns = ref([]) as any

interface PropsType {
  title: string
}
const props = withDefaults(defineProps<PropsType>(), {
  title: '33333'
})

console.log('titlle', props.title)

function clickCard(_val: any) {
  if (activeKey.value === _val) {
    activeKey.value = ''
  } else {
    activeKey.value = _val
  }
}

function init() {
  const defaultColumns: Column[] = [
    {
      dataIndex: 'status',
      title: '状态',
      width: '15%',
      ellipsis: false,
      align: 'left'
    },
    {
      dataIndex: 'name',
      title: '项目名称',
      width: '45%',
      ellipsis: true,
      align: 'left'
    },
    {
      dataIndex: 'unit',
      title: '业主单位',
      width: '35%',
      ellipsis: true,
      align: 'left'
    },
    {
      dataIndex: 'supervise',
      title: '督办事项',
      width: '35%',
      ellipsis: true,
      align: 'left'
    },
    {
      dataIndex: 'duration',
      title: '状态时长（天）',
      width: '35%',
      ellipsis: true,
      align: 'left'
    },
    {
      title: '操作',
      width: '20%',
      dataIndex: 'operation'
    }
  ]
  columns.value = defaultColumns
}

// 获取icon
function getImage(name: string) {
  return new URL(`/src/assets/images/globalCommon/${name}.png`, import.meta.url).href
}

init()

watch(activeKey, (val) => {
  console.log(val)
})
</script>
<style lang="scss" scoped>
.departAgency {
  .collapse-wrap {
    border-radius: 6vh * $Bh;
    background: #21396a;
    height: 1751vh * $Bh;
    margin-top: 33vh * $Bh;
    overflow-y: auto;

    .bottom_solid {
      border-bottom: 2vh * $Bh solid #5491e1;
    }

    .collapse-item {
      height: 126vh * $Bh;
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-left: 41vw * $Bw;
      margin-right: 40vw * $Bw;

      .name {
        margin-right: 44vw * $Bw;
      }

      .status {
        margin-right: 40vw * $Bw;
        display: flex;
        align-items: center;

        img {
          margin-right: 23vw * $Bw;
        }

        &:last-child {
          margin-right: 0;
        }
      }

      .right-oper {
        margin-left: auto;
      }
    }

    .collapse-item-child {
      background: #17294f;
      padding-top: 40vh * $Bh;
      padding-left: 40vw * $Bw;
      padding-right: 40vw * $Bw;

      :deep(.z-table) {
        .ant-table {
          .ant-table-container {
            table {
              .ant-table-thead {
                .ant-table-cell {
                  padding: 25vh * $h 0;

                  &:first-child {
                    padding-left: 34vw * $w;
                  }
                }
              }

              .ant-table-tbody {
                .ant-table-row {
                  .ant-table-cell {
                    &:first-child {
                      padding-left: 34vw * $w;
                    }
                  }
                }
              }
            }

            .odd {
              background: #17294f;
            }

            .even {
              background: #1e3563;
            }

            .ant-table-thead {
              background: #264078;
              height: 83vh * $Bh;
              padding: 0 34vw * $w 0 30vw * $w;
            }
          }
        }
      }
    }
  }
}
</style>
